<template>
  <el-row>
    <el-dialog title="添加配置" append-to-body :show-close="false" :close-on-press-escape="false" :visible.sync="dialogTableVisible" :close-on-click-modal="false" top="3%">
      <el-form class="demo-ruleForm">
        <el-form-item label="配置项:">
          <el-select clearable v-model="value" @change="changeConfigTableData" filterable placeholder="请选择"
                     style="width:90%">
            <el-option-group v-for="group in options" :key="group.label" :label="group.label">
              <el-option v-for="item in group.options" :key="item.value" :label="item.label" :disabled="item.flag"
                         :value="item.value"></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名:" v-show="showCatalogName">
          <el-input class="inputWidth" v-model="data.catalogName" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="变量:" v-show="value">
          <el-row></el-row>
          <el-row>
            <el-col :span="12">
              <el-input placeholder="请输入变量名" prefix-icon="el-icon-search" clearable style="width:40%"
                        v-model="dialogProKeyName"></el-input>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" @click="addVariable" style="float:right;margin-right:30px">添加变量</el-button>
            </el-col>
            <el-col :span="24">
              <el-table :data="configTableData.list" v-loading="getTableData"
                        style="width: 100%;overflow-y:auto;max-height:440px;margin-top:20px">
                <el-table-column prop="proKeyName" label="变量名" sortable width="180">
                  <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" :content="scope.row.proKeyName" placement="top-start">
                          <el-input :disabled="!scope.row.flagFirst" placeholder="请输入变量名"
                              v-model="scope.row.proKeyName"></el-input>
                      </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="proValue" label="变量值" sortable width="180">
                  <template slot-scope="scope">
                      <!-- <el-tooltip class="item" effect="dark" :content="scope.row.proValue" placement="top-start"> -->
                          <el-input type="textarea" autosize clearable :disabled="scope.row.flag" placeholder="请输入变量值"
                              v-model="scope.row.proValue"></el-input>
                      <!-- </el-tooltip> -->
                  </template>
                </el-table-column>
                <el-table-column prop="proKeyName" label="描述" sortable width="180">
                  <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" :content="scope.row.descStr" placement="top-start">
                          <el-input placeholder="请输入描述" clearable :disabled="scope.row.flag" v-model="scope.row.descStr">
                            </el-input>
                      </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="filePath" sortable label="参数文件">
                  <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" :content="scope.row.filePath" placement="top-start">
                          <el-input placeholder="请输入文件路径" clearable :disabled="scope.row.flag"
                              v-model="scope.row.filePath"></el-input>
                      </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column label="操作" sortable width="180">
                  <template slot-scope="scope">
                    <div class="btns">
                      <el-button type="text" size="small" v-if="scope.row.modificationd"
                                 @click="modification(scope.row)">修改
                      </el-button>
                      <el-button type="text" size="small" v-if="!scope.row.modificationd"
                                 @click="saveModification(scope.row.id)">保存
                      </el-button>
                      <el-button type="text" size="small"
                                 @click="deleted(scope.row.id)">删除
                      </el-button>
                      <el-upload
                        v-if="!scope.row.modificationd && scope.row.proType=='file'"
                        class="upload-demo"
                        :data="addHostObj"
                        :headers="{authorization:token}"
                        :action="uploadUrl"
                        :show-file-list="false"
                        :on-success="getFileUrl"
                        :on-error="getErrMes"
                      >
                        <el-button size="small" type="text" @click="upLoadFile(scope.row.id)">上传</el-button>
                      </el-upload>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="12" :offset="12">
              <el-pagination
                :small="true"
                class="dialogPagination"
                :pager-count="5"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="configTableData.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="configTableData.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="configTableData.total">
              </el-pagination>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top:-50px">
        <el-button @click="subCancle">取 消</el-button>
        <el-button type="primary" @click="submitList">确 定</el-button>
      </div>
    </el-dialog>
    <el-tabs v-model="activePz" style="height: 700px;" v-loading="loading" @tab-click="forHA">
      <el-tab-pane label="基础配置" name="common">
        <el-tabs :tab-position="tabPosition" @tab-click="handleCommonClick" v-model="activeCommon" class="configSty">
          <el-tab-pane label="JVM配置" name="jvm">
            <el-form class="demo-ruleForm">
              <el-form-item v-for="item in currentConfigList" :key="item.id" prop="JVM">
                <el-input type="textarea" :rows="20" placeholder="请输入内容" v-model="item.proValue"></el-input>
                <el-tooltip placement="top">
                  <div slot="content" style="width:300px;">{{item.descStr}}</div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="NODE配置" name="node">
            <el-form label-width="300px" label-position="left" class="demo-ruleForm">
              <el-form-item v-for="item in currentConfigList" :key="item.id" :label="item.proKeyName"
                            :prop="item.proKeyName">
                <el-input class="inputWidth" v-model="item.proValue" placeholder="请输入内容"></el-input>
                <el-tooltip placement="right">
                  <div slot="content" style="width:300px;">{{item.descStr}}</div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="CONFIG配置" name="config">

            <div class="demo-ruleForm configuration-form1" v-if="guide || !role">
                <el-form label-width="300px" label-position="left" style="margin-top:20px">
                    <el-form-item v-for="item in currentConfigList" :label="item.proKeyName" :key="item.id"
                                    :prop="item.proKeyName">
                        <el-input class="inputWidth" v-model="item.proValue" placeholder="请输入内容"></el-input>
                        <el-tooltip placement="right">
                            <div slot="content" style="width:300px;">{{item.descStr}}</div>
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </el-form-item>
                </el-form>
            </div>

            <div class="configuration" v-else>

                <div class="demo-ruleForm configuration-form1">
                    <div class="coor">worker：</div>
                    <el-form label-width="300px" label-position="left" style="margin-top:20px">
                        <el-form-item v-for="item in currentConfigList" :label="item.proKeyName" :key="item.id"
                                        :prop="item.proKeyName">
                            <el-input class="inputWidth" v-model="item.proValue" placeholder="请输入内容"></el-input>
                            <el-tooltip placement="right">
                                <div slot="content" style="width:300px;">{{item.descStr}}</div>
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-form-item>
                        <el-form-item label="coordinator">
                            <el-input class="inputWidth" value="false" disabled></el-input>
                            <el-tooltip placement="right">
                                <div slot="content" style="width:300px;">是否为coordinator</div>
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="demo-ruleForm configuration-form2">
                    <div class="coor">coordinator：</div>
                    <el-form label-width="300px" label-position="left" style="margin-top:20px">
                        <el-form-item v-for="item in currentConfigList" :label="item.proKeyName" :key="item.id"
                                        :prop="item.proKeyName">
                            <el-input class="inputWidth" v-model="item.proValue" placeholder="请输入内容"></el-input>
                            <el-tooltip placement="right">
                                <div slot="content" style="width:300px;">{{item.descStr}}</div>
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-form-item>
                        <el-form-item label="coordinator">
                            <el-input class="inputWidth" value="true" disabled></el-input>
                            <el-tooltip placement="right">
                                <div slot="content" style="width:300px;">是否为coordinator</div>
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="状态存储配置" name="state" v-if="getHA">
                <el-table :data="configTableData.list" v-loading="getTableData"
                        style="width: 100%;max-height:450px;overflow-y:auto;margin-top:20px;">
                <el-table-column prop="proKeyName" label="变量名" sortable width="180">
                  <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" :content="scope.row.proKeyName" placement="top-start">
                          <el-input :disabled="!scope.row.flagFirst" placeholder="请输入变量名"
                              v-model="scope.row.proKeyName"></el-input>
                      </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="proValue" label="变量值" sortable width="180">
                  <template slot-scope="scope">
                      <!-- <el-tooltip class="item" effect="dark" :content="scope.row.proValue" placement="top-start"> -->
                          <el-input type="textarea" autosize clearable :disabled="scope.row.flag" placeholder="请输入变量值"
                              v-model="scope.row.proValue"></el-input>
                      <!-- </el-tooltip> -->
                  </template>
                </el-table-column>
                <el-table-column prop="proKeyName" label="描述" sortable width="180">
                  <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" :content="scope.row.descStr" placement="top-start">
                          <el-input placeholder="请输入描述" clearable :disabled="scope.row.flag" v-model="scope.row.descStr"></el-input>
                      </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="filePath" sortable label="参数文件">
                  <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" :content="scope.row.filePath" placement="top-start">
                          <el-input placeholder="请输入文件路径" clearable :disabled="scope.row.flag"
                              v-model="scope.row.filePath"></el-input>
                      </el-tooltip>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="操作" sortable width="100">
                  <template slot-scope="scope">
                    <div class="btns"> -->
                      <!-- <el-button type="text" size="small"
                                 @click="deletedHA(scope.row.id)">删除
                      </el-button> -->
                      <!-- v-if="scope.row.proType=='file'" -->
                      <!-- <el-upload
                        v-if="scope.row.proType=='file'"
                        class="upload-demo"
                        :data="addHostObj"
                        :headers="{authorization:token}"
                        :action="uploadUrl"
                        :show-file-list="false"
                        :on-success="getFileUrlHA"
                        :on-error="getErrMesHA"
                      >
                        <el-button size="small" type="text" @click="upLoadFileHA(scope.row.id)">上传</el-button>
                      </el-upload>
                    </div>
                  </template>
                </el-table-column> -->
              </el-table>
              <el-col :span="12" :offset="12">
              <el-pagination
                :small="true"
                class="dialogPagination"
                :pager-count="5"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="configTableData.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="configTableData.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="configTableData.total">
              </el-pagination>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="文件系统配置" name="file" v-if="getHA">
            <el-table :data="configTableData.list" v-loading="getTableData"
                        style="width: 100%;max-height:450px;overflow-y:auto;margin-top:20px;">
                <el-table-column prop="proKeyName" label="变量名" sortable width="180">
                  <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" :content="scope.row.proKeyName" placement="top-start">
                          <el-input :disabled="!scope.row.flagFirst" placeholder="请输入变量名"
                              v-model="scope.row.proKeyName"></el-input>
                      </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="proValue" label="变量值" sortable width="180">
                  <template slot-scope="scope">
                      <!-- <el-tooltip class="item" effect="dark" :content="scope.row.proValue" placement="top-start"> -->
                          <el-input type="textarea" autosize clearable :disabled="scope.row.flag" placeholder="请输入变量值"
                              v-model="scope.row.proValue"></el-input>
                      <!-- </el-tooltip> -->
                  </template>
                </el-table-column>
                <el-table-column prop="proKeyName" label="描述" sortable width="180">
                  <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" :content="scope.row.descStr" placement="top-start">
                          <el-input placeholder="请输入描述" clearable :disabled="scope.row.flag" v-model="scope.row.descStr"></el-input>
                      </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="filePath" sortable label="参数文件">
                  <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.filePath" placement="top-start">
                          <el-input placeholder="请输入文件路径" clearable :disabled="scope.row.flag"
                              v-model="scope.row.filePath"></el-input>
                        </el-tooltip>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="操作" sortable width="100">
                  <template slot-scope="scope">
                    <div class="btns"> -->
                      <!-- <el-button type="text" size="small"
                                 @click="deletedHA(scope.row.id)">删除
                      </el-button> -->
                      <!-- <el-upload
                        v-if="scope.row.proType=='file'"
                        class="upload-demo"
                        :data="addHostObj"
                        :headers="{authorization:token}"
                        :action="uploadUrl"
                        :show-file-list="false"
                        :on-success="getFileUrl"
                        :on-error="getErrMes"
                      >
                        <el-button size="small" type="text" @click="upLoadFileHA(scope.row.id)">上传</el-button>
                      </el-upload>
                    </div>
                  </template>
                </el-table-column> -->
              </el-table>
              <el-col :span="12" :offset="12">
              <el-pagination
                :small="true"
                class="dialogPagination"
                :pager-count="5"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="configTableData.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="configTableData.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="configTableData.total">
              </el-pagination>
            </el-col>
          </el-tab-pane>

        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="全部配置" name="all">
        <el-button type="primary" @click="dialogAdd">添加配置</el-button>
        <div class="trees">
            <div class="fobid"></div>
            <el-tree :data="treeData" node-key="label" ref="tree" :highlight-current="true" accordion @node-click="handleNodeClick" class="treed">
            </el-tree>
            <!-- <el-tabs :tab-position="tabPosition" v-model="targetItem" @tab-click="handleClick" class="tabs"> -->
                <!-- <el-tab-pane label="添加配置" name="addConfig"></el-tab-pane> -->
                    <!-- <el-tab-pane v-for="item in configGroupList" :key="item" :label="item" :name="item"> -->
                        <div class="newTab" v-if="showNewTab">
                            <el-row class="config-el-row">
                            <el-col :span="12">
                                <el-input placeholder="请输入变量名" prefix-icon="el-icon-search" clearable v-model="proKeyName"
                                        style="width:40%">
                                </el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="primary" style="float:right;margin-right:100px" @click="addList">添加变量</el-button>
                            </el-col>
                            <el-col :span="24">
                                <el-table :data="configTableData.list"
                                        style="width: 100%;overflow-y:scroll;max-height:460px;margin-top:20px">
                                <el-table-column prop="proKeyName" label="变量名" sortable :width="guide?'100':'180'">
                                    <template slot-scope="scope">
                                        <el-tooltip class="item" effect="dark" :content="scope.row.proKeyName" placement="top-start">
                                            <el-input :disabled="!scope.row.firstFlaged" placeholder="请输入变量名"
                                                v-model="scope.row.proKeyName"></el-input>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="proValue" label="变量值" sortable :width="guide?'180':'460'">
                                    <template slot-scope="scope">
                                        <!-- <el-tooltip class="item" effect="dark" :content="scope.row.proValue" placement="top-start"> -->
                                            <el-input type="textarea" autosize :disabled="!scope.row.flaged" clearable placeholder="请输入变量值"
                                                v-model="scope.row.proValue"></el-input>
                                        <!-- </el-tooltip> -->
                                    </template>
                                </el-table-column>
                                <el-table-column prop="proKeyName" label="描述" sortable :width="guide?'180':'460'">
                                    <template slot-scope="scope">
                                        <el-tooltip class="item" effect="dark" :content="scope.row.descStr" placement="top-start">
                                            <el-input :disabled="!scope.row.flaged" placeholder="请输入描述" clearable
                                                v-model="scope.row.descStr"></el-input>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="filePath" sortable label="参数文件" :width="guide?'180':'240'">
                                    <template slot-scope="scope">
                                        <el-tooltip class="item" effect="dark" :content="scope.row.filePath" placement="top-start">
                                            <el-input :disabled="!scope.row.flaged" placeholder="请输入文件路径" clearable
                                                v-model="scope.row.filePath"></el-input>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" sortable width="180">
                                    <template slot-scope="scope">
                                    <div class="btns">
                                        <el-button type="text" size="small" v-if="!scope.row.pageBtn" @click="modited(scope.row.id)">
                                        修改
                                        </el-button>
                                        <el-button type="text" size="small" v-if="scope.row.pageBtn" @click="saved(scope.row.id)">保存
                                        </el-button>
                                        <el-button type="text" size="small"
                                                @click="sliced(scope.row.id)">删除
                                        </el-button>
                                        <el-upload
                                        v-if="scope.row.pageBtn && scope.row.proType=='file'"
                                        class="upload-demo"
                                        :data="addHostObj"
                                        :headers="{authorization:token}"
                                        :action="uploadUrl"
                                        :show-file-list="false"
                                        :on-success="getFileUrled">
                                        <el-button size="small" type="text" @click="upLoadFiled(scope.row.id)">上传</el-button>
                                        </el-upload>
                                    </div>
                                    </template>
                                </el-table-column>
                                </el-table>
                            </el-col>
                            </el-row>
                            <el-row>
                            <el-col :span="12" :offset="12">
                                <el-pagination
                                    class="pagination"
                                    :style="guide?'margin-left:-80px':''"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="configTableData.pageNo"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="configTableData.pageSize"
                                layout="total, sizes, prev, pager, next"
                                :total="configTableData.total">
                                </el-pagination>
                            </el-col>
                            </el-row>
                        </div>
                    <!-- </el-tab-pane> -->
            <!-- </el-tabs>   -->
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-row v-if="showButton=='true'">
      <el-col :span="6" :offset="6">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="modifyConfigList">提交</el-button>
      </el-col>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="subHint"
      width="30%">
      <span>配置已保存,请重启集群或实例!</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="subHint = false">暂不重启</el-button>
        <el-button type="primary" @click="changeNodeState('restart')">立即重启</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>
<script>
    import {doGet, doPost} from '@/api/index.js'
    // import { set } from 'vue/types/umd'
    import pubsub from'pubsub-js'

    export default {
        props: {
            showButton: {
                type: String,
                default: 'false'
            },
            checkVis: {
                type: Boolean,
                default: false
            },
            getHA:{
                type: Boolean,
                default: false
            },
            guide:{
                type: Boolean,
                default: false
            },
            allIp:{
                type: String,
                default: ''
            }
        },
        name: 'config',
        created() {
            let clusterId = this.$route.query.clusterId
            if (clusterId) {
                this.clusterId = clusterId
            }
        },
        mounted() {
            this.initData();
            pubsub.subscribe("role",(_,data)=>{
                this.role = data;
            });
        },
        methods: {
            //click tree shape structure
            handleNodeClick(data) {
                if(data.children){
                    let targetNode = [];
                    for(let j=0;j<this.treeData.length;j++){
                        this.treeData[j].children=[{}]
                    }
                    for(let i=0;i<this.configList.length;i++){
                        if(this.configList[i].typeGroupName == data.label){
                            if(this.configList[i].typeGroupName == '特性配置'){
                                targetNode.push(this.configList[i].type.toUpperCase())
                            }else{
                                targetNode.push(this.configList[i].configGroup.toUpperCase())
                            }
                        }
                    }
                    targetNode = [...new Set(targetNode)]
                    for(let i =0;i<targetNode.length;i++){
                        for(let j=0;j<this.treeData.length;j++){
                            this.treeData[j].children.push({label:targetNode[i]})
                        }
                    }
                    for(let j=0;j<this.treeData.length;j++){
                        this.treeData[j].children.shift()
                    }
                }else{
                    let targetLabel = this.configList.filter((item)=>{
                        if(item.type.toUpperCase() == data.label || item.configGroup.toUpperCase() == data.label){
                            return item;
                        }
                    });
                    this.targetLael = targetLabel[0].configGroup;
                    this.showNewTab = true;
                    this.targetLabel = targetLabel[0].configGroup;
                    this.changeConfigTableDataPro(targetLabel[0].configGroup)
                }
            },
            //create tree shape structure
            buildTree(){
                let targetNode=[];
                this.treeData=[];
                for(let i=0;i<this.configList.length;i++){
                    targetNode.push(this.configList[i].typeGroupName);
                }
                targetNode = [...new Set(targetNode)];
                for(let i=0;i<targetNode.length;i++){
                    this.treeData.push({label:targetNode[i],children: [{}]});
                }
            },
            //ha page basic configuration and all configuration change
            forHA(tab){
                if(this.getHA){
                    //save data in configList when tab is change
                    for(let i = 0;i<this.configList.length;i++){
                        for(let j=0;j<this.configTableData.list.length;j++){
                            if(this.configTableData.list[j].id == this.configList[i].id){
                                this.configList.splice(i,1,this.configTableData.list[j])
                            }
                        }
                    }
                }
                if(tab.name=="common"){
                    if(this.haName == "state"){
                        let targetLabel = this.configList.filter((item)=>{
                            if(item.type == "状态存储"){
                                return item;
                            }
                        });
                        this.changeConfigTableDataPro(targetLabel[0].configGroup);
                        // this.changeConfigTableData("状态存储")
                    }else if(this.haName == "file"){
                        let targetLabel = this.configList.filter((item)=>{
                        if(item.type == "文件系统"){
                                return item;
                            }
                        });
                        this.changeConfigTableDataPro(targetLabel[0].configGroup);
                        // this.changeConfigTableData("文件系统")
                    }
                }
            },
            changePort(port) {
                for (let i in this.currentConfigList) {
                    let item = this.currentConfigList[i];
                    if (item.proKeyName == 'discovery.uri') {
                        let prefix = item.proValue.slice(0, item.proValue.lastIndexOf(":") + 1)
                        item.proValue = prefix + port;
                        break;
                    }
                }
            },
            initData() {
                this.token = JSON.parse(localStorage.getItem('userInfo')).authorization
                /*let userInfo = localStorage.getItem('userInfo')
                let version = '1.4.1'
                if (userInfo) {
                    version = JSON.parse(userInfo).version
                }*/
                let _this = this
                let apiUrl = '/sys_openlookeng_cluster/getVersion'
                let obj = {'nodeId': _this.clusterId}
                doGet(apiUrl, obj).then(res => {
                    _this.version = res.data.data.version
                    //get classification
                    _this.listConfigGroup()
                    _this.listClusterConfig()
                    _this.listSysDefaultConfig()

                })
            },

            //add variable proType,default file
            addVariable() {
                // setTimeout(() => {
                let addItem = JSON.parse(JSON.stringify(this.configTableData.list[0]))
                addItem.proType = 'file';
                addItem.id = this.modiId++;
                addItem.proValue = '';
                addItem.descStr = '';
                addItem.filePath = '';
                addItem.proKeyName = '';
                addItem.flag = false;
                addItem.flagFirst = true;
                addItem.modificationd = false;
                this.configTableData.list.unshift(addItem);
                // }, 100)
                this.configTableData.total++
                this.configTableData.allList.unshift(addItem)
                this.pageCurrentList();
            },
            //add modify button in configuration
            modification(row) {
                this.configTableData.list = this.configTableData.list.filter((item) => {
                    if (item.id == row.id) {
                        item.flag = false
                        item.modificationd = false
                    }
                    if (item.proKeyName == '' && item.id == row.id) {
                        item.flagFirst = true
                        item.flag = false
                        item.modificationd = false
                    }
                    return item
                })
            },
            //save modify content
            saveModification(id) {
                this.configTableData.list = this.configTableData.list.filter((item) => {
                    if (item.id == id) {
                        item.modificationd = true;
                        item.flag = true;
                        item.flagFirst = false;
                        for (let i = 0; i < this.configTableData.allList.length; i++) {
                            if (this.configTableData.allList[i].id == id) {
                                this.configTableData.allList.splice(i, 1);
                            }
                        }
                        this.configTableData.allList.unshift(item);
                        this.sysDefaultConfigList.unshift(item);
                    }
                    return item
                })
            },
            //delete current configuration item
            deleted(id) {
                this.configTableData.list = this.configTableData.list.filter((item) => {
                    if (item.id != id) {
                        return item
                    }
                });
                for (let i = 0; i < this.sysDefaultConfigList.length; i++) {
                    if (this.sysDefaultConfigList[i].id == id) {
                        this.sysDefaultConfigList.splice(i, 1);
                    }
                }
            },
            //upload file
            upLoadFile(id) {
                this.addHostObj = {version: this.version, clusterId: this.clusterId};
                this.upLoadId = id
            },
            //upload file success
            getFileUrl(response, file, fileList) {
                if (response.code != 200) {
                    this.$message({
                        showClose: true,
                        message: response.msg,
                        type: 'info'
                    })
                    return
                }
                this.configTableData.list = this.configTableData.list.filter((item) => {
                    if (item.id == this.upLoadId) {
                        if (item.proValue == '') {
                            item.proValue = response.data.filePath
                        } else {
                            item.proValue = item.proValue + ',' + response.data.filePath
                        }
                    }
                    return item
                })
                this.$message({
                    showClose: true,
                    message: '上传成功!',
                    type: 'success'
                })
            },
            //upload file error
            getErrMes(err, file, fileList) {
                this.$message({
                    showClose: true,
                    message: err,
                    type: 'success'
                })
            },
            //submit data
            submitList() {
                if (this.data.catalogName == '') {
                    this.$message({
                        showClose: true,
                        message: '目录名不能为空!',
                        type: 'info'
                    })
                    return
                }
                if (this.configGroupList.indexOf(this.data.catalogName) > 0) {
                    this.$message({
                        showClose: true,
                        message: '目录名不能重复!',
                        type: 'info'
                    })
                    return
                }
                this.configGroupList.push(this.data.catalogName)
                for (let item of this.configTableData.list) {
                    item.configGroup = this.data.catalogName
                    this.configList.push(item)
                }
                for (let list of this.options) {
                    if (list.label == '连接器') break
                    for (let item of list.options) {
                        for (let i = 0; i < this.configGroupList.length; i++) {
                            if (this.configGroupList[i] == item.label) {
                                item.flag = true
                                break
                            } else {
                                item.flag = false
                            }
                        }
                    }
                }
                this.buildTree();
                this.showNewTab = false;
                // this.handleNodeClick(treeData);
                this.dialogTableVisible = false;
                this.targetItem = this.data.catalogName;
                this.changeConfigTableDataPro(this.targetItem);
                this.dialogProKeyName = "";
                this.getTableData = false;
                this.listSysDefaultConfigOptions();
            },
            subCancle() {
                this.changeConfigTableDataPro(this.targetName);
                if(this.targetLael!=""){
                    this.changeConfigTableDataPro(this.targetLael);
                }
                this.dialogTableVisible = false;
                this.dialogProKeyName = "";
                this.getTableData = false;
            },
            handleCommonClick(tab, event) {
                let name = tab.name
                this.haName = name;
                let currentConfigList = []
                let allConfigList = this.configList
                allConfigList.forEach(function (item, index) {
                    let type = item.type
                    if (type == name) {
                        currentConfigList.push(item)
                    }
                })
                this.currentConfigList = currentConfigList;
                localStorage.setItem("configArr", JSON.stringify(currentConfigList));
                if(name == "state"){
                    this.configTableData.pageNo = 1
                    let targetLabel = this.configList.filter((item)=>{
                        if(item.type == "状态存储"){
                            return item;
                        }
                    });
                    this.changeConfigTableDataPro(targetLabel[0].configGroup);
                    //save data in configList when tab is change
                    for(let i = 0;i<this.configList.length;i++){
                        for(let j=0;j<this.configTableData.list.length;j++){
                            if(this.configTableData.list[j].id == this.configList[i].id){
                                this.configList.splice(i,1,this.configTableData.list[j])
                            }
                        }
                    }
                }else if(name == "file"){
                    this.configTableData.pageNo = 1;
                    let targetLabel = this.configList.filter((item)=>{
                        if(item.type == "文件系统"){
                            return item;
                        }
                    });
                    this.changeConfigTableDataPro(targetLabel[0].configGroup);
                    //save data in configList when tab is change
                    for(let i = 0;i<this.configList.length;i++){
                        for(let j=0;j<this.configTableData.list.length;j++){
                            if(this.configTableData.list[j].id == this.configList[i].id){
                                this.configList.splice(i,1,this.configTableData.list[j])
                            }
                        }
                    }
                }
            },
            listConfigGroup() {
                let _this = this
                let apiUrl = '/sys_openlookeng_cluster_config/listConfigGroup'
                let obj = {'version': this.version, 'clusterId': _this.clusterId}
                doGet(apiUrl, obj).then(res => {
                    _this.configGroupList = res.data.data;
                    _this.listSysDefaultConfigOptions()
                })
            },
            listSysDefaultConfigOptions() {
                let _this = this
                let apiUrl = '/sys_openlookeng_cluster_config/listSysDefaultConfigOptions'
                let obj = {'version': this.version}
                doGet(apiUrl, obj).then(res => {
                    let response = res.data.data
                    for (let list of response) {
                        if (list.label == '连接器') continue
                        for (let item of list.options) {
                            for (let i = 0; i < this.configGroupList.length; i++) {
                                if(this.configGroupList[i] == 'stateStore'){
                                    this.configGroupList[i] = '状态存储'
                                }else if(this.configGroupList[i] == 'filesystem'){
                                    this.configGroupList[i] = '文件系统'
                                }
                                if (this.configGroupList[i] == item.label) {
                                    item.flag = true
                                    break
                                } else {
                                    item.flag = false
                                }
                            }
                        }
                    }
                    _this.options = res.data.data
                })
            },
            // 提交
            modifyConfigList() {
                if(this.getHA){
                    //save data in configList when tab is change
                    for(let i = 0;i<this.configList.length;i++){
                        for(let j=0;j<this.configTableData.list.length;j++){
                            if(this.configTableData.list[j].id == this.configList[i].id){
                                this.configList.splice(i,1,this.configTableData.list[j])
                            }
                        }
                    }
                }
                this.loading = true;
                for (let i = 0; i < this.configList.length; i++) {
                    if (this.configList[i].proValue.trim() == '') {
                        this.$message({
                            showClose: true,
                            message: this.configList[i].type + "配置中不能存在空数据",
                            type: 'warning'
                        })
                        this.loading = false;
                        return
                    }
                }
                let _this = this
                let apiUrl = '/sys_openlookeng_cluster_config/modifyConfigList'
                let obj = {'version': _this.version, 'clusterId': this.clusterId, 'configList': this.configList}
                doPost(apiUrl, obj).then(res => {
                    this.loading = false;
                    if (res.data.code == 0) {
                        // _this.initData();
                        if (_this.showButton == 'true') {
                            /*_this.$message({
                              showClose: true,
                              message: '配置修改成功,请重启集群或节点!',
                              type: 'success'
                            })*/
                            this.subHint = true
                        } else {
                            _this.$message({
                                showClose: true,
                                message: '配置保存成功!',
                                type: 'success'
                            })
                        }
                        this.$emit("configSuccess")
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'waring'
                        })
                    }
                })
            },
            cancel()
            {
                location.reload();
            },
            listSysDefaultConfig() {
                let _this = this
                let apiUrl = '/sys_openlookeng_cluster_config/listSysDefaultConfig'
                let obj = {'version': _this.version}
                doGet(apiUrl, obj).then(res => {
                    _this.sysDefaultConfigList = res.data.data;
                    let stateList = this.getHAdata("状态存储");
                    let fillList = this.getHAdata("文件系统");
                    if(this.getHA && this.haIndex){
                        let ips = JSON.parse(this.allIp);
                        let provalue = "";
                        if(ips.length!=0){
                            for(let i =0;i<ips.length;i++){
                                if(provalue==""){
                                    provalue = ips[i]
                                }else{
                                    provalue = provalue+","+ips[i]
                                }
                            }
                        }
                        for(let i=0;i<stateList.length;i++){
                            if(stateList[i].proKeyName == 'hazelcast.discovery.tcp-ip.seeds'){
                                stateList[i].proValue = provalue
                            }
                            this.configList.push(stateList[i]);
                        }
                        for(let i=0;i<fillList.length;i++){
                            this.configList.push(fillList[i]);
                        }
                        // this.configTableData.list = this.configList.splice(0)
                    }
                    _this.getTableData = false;
                })
            },
            // ha page,get status and metadata when initialization
            getHAdata(val){
                let _this = this
                let sysDefaultConfigList;
                sysDefaultConfigList = this.sysDefaultConfigList;
                let configTableDataList = []
                let proKeyName = this.dialogProKeyName
                sysDefaultConfigList.forEach(function (item) {
                    let type = item.type
                    // let configGroup = item.configGroup
                    if (type == val) {
                        if (proKeyName) {
                            if (item.proKeyName.toLowerCase().includes(proKeyName.toLowerCase())) {
                                configTableDataList.push(item)
                            }
                        } else {
                            configTableDataList.push(item)
                        }
                        let typeGroup = item.typeGroup
                        //连接器
                        if (typeGroup == 'connect') {
                            _this.showCatalogName = true
                        } else {
                            _this.showCatalogName = false
                        }
                    }
                })
                return  configTableDataList
            },
            // ha page deletion
            deletedHA(id){
                // be used for submit data
                this.configTableData.total--
                this.configList = this.configList.filter((item)=>{
                    if(item.id!=id){
                        return item
                    }
                });
                // be used for exhibit page
                this.configTableData.list = this.configTableData.list.filter((item)=>{
                    if(item.id!=id){
                        return item
                    }
                });
            },
            // upload file in ha page
            upLoadFileHA(id){
                this.addHostObj = {version: this.version, clusterId: this.clusterId};
                this.upLoadId = id
            },
            //upload file success
            getFileUrlHA(response, file, fileList) {
                if (response.code != 200) {
                    this.$message({
                        showClose: true,
                        message: response.msg,
                        type: 'info'
                    })
                    return
                }

                // be used for submit data
                this.configList = this.configList.filter((item) => {
                    if (item.id == this.upLoadId) {
                        if (item.proValue == '') {
                            item.proValue = response.data.filePath
                        } else {
                            item.proValue = item.filePath + ',' + response.data.filePath
                        }
                    }
                    return item
                })
                // be used for page exhibition
                this.configTableData.list = this.configTableData.list.filter((item)=>{
                    if (item.id == this.upLoadId) {
                        if (item.filePath == '') {
                            item.filePath = response.data.filePath
                        } else {
                            item.filePath = item.filePath + ',' + response.data.filePath
                        }
                    }
                    return item
                })


                this.$message({
                    showClose: true,
                    message: '上传成功!',
                    type: 'success'
                })
            },
            //upload file error
            getErrMesHA(err, file, fileList) {
                this.$message({
                    showClose: true,
                    message: err,
                    type: 'success'
                })
            },
            //add configuration in home page
            dialogAdd() {
                this.dialogTableVisible = true;
                this.value = '';
                this.getTableData = true;
                // this.showNewTab = false;
                this.haIndex = false;
                this.listSysDefaultConfig();
            },
            listClusterConfig() {
                let _this = this
                let apiUrl = '/sys_openlookeng_cluster_config/listClusterConfig'
                let obj = {'version': this.version, 'clusterId': _this.clusterId}
                doGet(apiUrl, obj).then(res => {
                    _this.configList = res.data.data;
                    if(localStorage.getItem("serviceIp"))
                    {
                        let index1=null;
                        let index2=null;
                        for(let k=0;k<_this.configList.length;k++)
                        {
                            if(_this.configList[k].proKeyName=="discovery.uri"){index1=k;}
                            if(_this.configList[k].proKeyName=="http-server.http.port"){index2=k;}
                        }
                        _this.configList[index1].proValue="http://"+JSON.parse(localStorage.getItem("serviceIp"))+":"+_this.configList[index2].proValue;
                        localStorage.removeItem("serviceIp");
                    }
                    // get tree shape stucture
                    this.buildTree()
                    let name = 'jvm'
                    if(this.activeCommon!='jvm'){
                        name = this.activeCommon
                    }
                    let currentConfigList = []
                    let allConfigList = _this.configList
                    allConfigList.forEach(function (item, index) {
                        let type = item.type
                        if (type == name) {
                            currentConfigList.push(item)
                        }
                    })
                    _this.currentConfigList = currentConfigList
                })
            },
            handleSizeChange(val) {
                this.configTableData.pageSize = val
                this.pageCurrentList(this.currentType)
            },
            handleCurrentChange(val) {
                this.configTableData.pageNo = val
                this.pageCurrentList(this.currentType)
            },
            pageCurrentList() {
                let allList = this.configTableData.allList;
                let proKeyName = this.dialogProKeyName;
                if (!proKeyName) {
                    proKeyName = this.proKeyName;
                }
                let configTableDataList = [];
                allList.forEach(function (item) {
                    if (proKeyName) {
                        if (item.proKeyName.toLowerCase().includes(proKeyName.toLowerCase())) {
                            configTableDataList.push(item)
                        }
                    } else {
                        configTableDataList.push(item)
                    }
                })
                let newList = this.pageList(configTableDataList)
                this.configTableData.list = JSON.parse(JSON.stringify(newList))
                this.configTableData.total = configTableDataList.length
            },
            handleClick(tab, event) {
                let name = tab.name
                this.targetName = name;
                this.changeConfigTableDataPro(name)
            },
            pageList(list) {
                let page = this.configTableData.pageNo
                let pageSize = this.configTableData.pageSize
                let start = (page - 1) * pageSize
                let end = page * pageSize
                let newList = list.slice(start, end)
                return newList;
            },
            //change default configuration table data
            changeConfigTableData(val) {
                let _this = this
                this.data.catalogName = val
                this.currentType = val
                let sysDefaultConfigList;
                sysDefaultConfigList = this.sysDefaultConfigList;
                let configTableDataList = []
                let proKeyName = this.dialogProKeyName
                sysDefaultConfigList.forEach(function (item) {
                    let type = item.type
                    let configGroup = item.configGroup
                    if (type == val || configGroup == val) {
                        if (proKeyName) {
                            if (item.proKeyName.toLowerCase().includes(proKeyName.toLowerCase())) {
                                configTableDataList.push(item)
                            }
                        } else {
                            configTableDataList.push(item)
                        }
                        let typeGroup = item.typeGroup
                        //connecter
                        if (typeGroup == 'connect') {
                            _this.showCatalogName = true
                        } else {
                            _this.showCatalogName = false
                        }
                    }
                })
                let newList = this.pageList(configTableDataList)
                this.configTableData.allList = configTableDataList;
                this.configTableData.list = JSON.parse(JSON.stringify(newList))
                this.configTableData.total = configTableDataList.length
            },
            //change cluster configuration table
            changeConfigTableDataPro(val) {
                if (!val) return
                let _this = this
                this.data.catalogName = val
                this.currentType = val
                let configList = this.configList
                let configTableDataList = []
                let proKeyName = this.proKeyName
                configList.forEach(function (item) {
                    let configGroup = item.configGroup
                    if (configGroup == val) {
                        if (proKeyName) {
                            if (item.proKeyName.toLowerCase().includes(proKeyName.toLowerCase())) {
                                configTableDataList.push(item)
                            }
                        } else {
                            configTableDataList.push(item)
                        }
                        let typeGroup = item.typeGroup
                        //connecter
                        if (typeGroup == 'connect') {
                            _this.showCatalogName = true
                        } else {
                            _this.showCatalogName = false
                        }
                    }
                })
                let newList = this.pageList(configTableDataList)
                this.configTableData.allList = configTableDataList;
                this.targetAddList = configTableDataList
                this.configTableData.list = JSON.parse(JSON.stringify(newList))
                this.configTableData.total = configTableDataList.length
            },
            //add variable in home page
            addList() {
                this.configTableData.total++
                let temp = JSON.parse(JSON.stringify(this.configTableData.list[0]))
                temp.proType = 'file'
                temp.id = this.modiId2++
                temp.proValue = ''
                temp.descStr = ''
                temp.filePath = ''
                temp.proKeyName = ''
                temp.flaged = true
                temp.firstFlaged = true
                temp.pageBtn = true
                this.configTableData.list.unshift(temp)
                this.configTableData.allList.unshift(temp)
                this.pageCurrentList();
            },
            //modify in home page
            modited(id) {
                this.configTableData.list = this.configTableData.list.filter((item) => {
                    if (item.id == id) {
                        item.flaged = true
                        item.pageBtn = true
                    }
                    if (item.proKeyName == '' && item.id == id) {
                        item.flaged = true
                        item.firstFlaged = true
                        item.pageBtn = true
                    }
                    return item
                })
            },
            //save in home page
            saved(id) {
                this.configTableData.list = this.configTableData.list.filter((item) => {
                    if (item.id == id) {
                        item.flaged = false;
                        item.firstFlaged = false;
                        item.pageBtn = false;
                        for (let i = 0; i < this.configList.length; i++) {
                            if (this.configList[i].id == id) {
                                this.configList.splice(i, 1);
                                // this.configTableData.allList.splice(i, 1)
                            }
                        }
                        for (let i = 0; i < this.configTableData.allList.length; i++) {
                            if (this.configTableData.allList[i].id == id) {
                                this.configTableData.allList.splice(i, 1);
                            }
                        }
                        this.configList.unshift(item);
                        this.configTableData.allList.unshift(item)
                    }
                    return item
                })
            },
            upLoadFiled(id) {
                this.upLoadFiledId = id;
                this.addHostObj = {version: this.version, clusterId: this.clusterId};
            },
            //deletion in home page
            sliced(id) {
                this.configTableData.total--;
                this.configTableData.list = this.configTableData.list.filter((item) => {
                    if (item.id != id) {
                        return item
                    } else {
                        for (let i = 0; i < this.configList.length; i++) {
                            if (this.configList[i].id == id) {
                                this.configList.splice(i, 1);
                            }
                        }
                        for (let i = 0; i < this.configTableData.allList.length; i++) {
                            if (this.configTableData.allList[i].id == id) {
                                this.configTableData.allList.splice(i, 1);
                            }
                        }
                    }
                })
                let targetLength = this.configList.filter(item => {
                    return item.type == this.targetItem;
                });
                if (targetLength.length == 0) {
                    for (let i = 0; i < this.configGroupList.length; i++) {
                        if (this.configGroupList[i] == this.targetItem) {
                            this.configGroupList.splice(i, 1);
                            this.listSysDefaultConfigOptions();
                        }
                    }
                }
                this.pageCurrentList();
            },
            //upload in home page
            getFileUrled(response, file, fileList) {
                if (response.code != 200) {
                    this.$message({
                        showClose: true,
                        message: response.msg,
                        type: 'info'
                    })
                    return
                }
                this.configTableData.list = this.configTableData.list.filter((item) => {
                    if (item.id == this.upLoadFiledId) {
                        if (item.proValue == '') {
                            item.proValue = response.data.filePath
                        } else {
                            item.proValue = item.proValue + ',' + response.data.filePath
                        }
                    }
                    return item
                })
                this.$message({
                    showClose: true,
                    message: '上传成功!',
                    type: 'success'
                })
            },
            changeNodeState(state) {
                let _this = this
                _this.subHint = false;
                _this.loading = true;
                let apiUrl = `/sys_openlookeng_cluster/changeNodeState?nodeId=${this.clusterId}&state=${state}`;
                doPost(apiUrl).then(res => {
                    _this.loading = false;
                    if (res.data.code === 0) {
                        let message = ''
                        if (state === 'restart') {
                            message = '重启成功'
                        }
                        _this.$message({
                            showClose: true,
                            message: message,
                            type: 'success'
                        })
                    }
                })
            },
        },
        watch: {
            proKeyName(newVal, oldVal) {
                this.newVal = newVal;
                //this.changeConfigTableDataPro(this.currentType)
                this.pageCurrentList()
            },
            dialogProKeyName(newVal, oldVal) {
                this.newVal = newVal;
                //this.changeConfigTableData(this.currentType)
                this.pageCurrentList()
            },
            checkVis() {
                if (this.checkVis) {
                    this.listClusterConfig()
                }
            },
        },

        data() {
            return {
                role:false,
                haIndex:true,
                targetLael:'',
                haName:'',
                showNewTab:false,
                targetLabel:'',
                treeData: [
                    // {
                    //     label: '基础配置',
                    //     children: [{}]
                    // }, {
                    //     label: '连接器',
                    //     children: [{}]
                    // }, {
                    //     label: '特性配置',
                    //     children: [{}]
                    // }, {
                    //     label: '安全配置',
                    //     children: [{}]
                    // }
                ],
                getTableData: false,
                dialogList: false,
                dialogProKeyName: '',
                //turn appoint tab after add configuration
                targetItem: '',
                loading: false,
                removeDirectory: false,
                dialogVisible: false,
                //the name save when dialog is false
                targetName: '',
                upLoadFiledId: '',
                targetAddList: [],
                subHint: false,
                upLoadId: '',
                token: '',
                addHostObj: {},
                uploadUrl: `${process.env.UPLOAD_PARAM}/sys_file/uploadConfigFile`,
                currentType: '',
                data: {
                    catalogName: '',
                },
                version: '',
                showCatalogName: false,
                clusterId: -1, //-1 means cluster configuration
                value: '',
                proKeyName: '', //the value when search
                tabPosition: 'left',
                activePz: 'common',
                modiId: 0,
                modiId2: 0,
                activeCommon: 'jvm',
                dialogTableVisible: false,
                currentConfigList: [], //all configuration list in current selected item
                configList: [], //all configuration list of the cluster or the node
                configGroupList: [], //configuration group list
                sysDefaultConfigList: [], //the default configuration of system
                configTableData: {
                    list: [],//table data
                    allList: [], //all data
                    total: 10,
                    pageSize: 10,
                    pageNo: 1
                },
                options: [{
                    label: '热门城市',
                    options: [{
                        value: 'Shanghai',
                        label: '上海'
                    }, {
                        value: 'Beijing',
                        label: '北京'
                    }]
                }, {
                    label: '城市名',
                    options: [{
                        value: 'Chengdu',
                        label: '成都'
                    }, {
                        value: 'Shenzhen',
                        label: '深圳'
                    }, {
                        value: 'Guangzhou',
                        label: '广州'
                    }, {
                        value: 'Dalian',
                        label: '大连'
                    }]
                }],

            }
        }

    }

</script>
<style scoped>
    .coor{
        font-size: 20px;
        font-weight: 600;
    }
    .configuration{
        margin-top: 40px;
        display: flex;
        flex-direction: row;
    }
    .configuration-form1{
        margin-left: 40px;
    }
    .configuration-form2{
        margin-left: 120px;
    }
    .newTab{
        margin-left: 30px;
    }
    .trees{
        display: flex;
        flex-direction: row;
        position: relative;
        margin-top: 30px;
    }
    .fobid{
        position: absolute;
        width: 20px;
        height: 100%;
        z-index: 1000;
    }
    .treed{
        width: 200px;
        background:none;
    }
  .inputWidth {
    width: 300px;
  }

  .btns {
    display: flex;
    flex-direction: row;
  }

  .upload-demo {
    margin-left: 10px;
  }

  .dialogPagination{
      margin-left: 40px;
  }

  .pagination{
      margin-left: 220px;
  }
</style>
